<template>
  <div>
    <Headertop></Headertop>
    <hr size="4px" />
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <Navbar></Navbar>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <Navbarhorizon></Navbarhorizon>
          <div>
            <el-row>
              <el-col :span="5">
                <div class="grid-content bg-purple-light">
                  <Indexpage></Indexpage>
                </div>
              </el-col>
              <el-col :span="19">
                <div class="grid-content bg-purple-lighter">
                  <router-view></router-view>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
  
  <script>
import Headertop from '@/components/page2/headertop'
import Navbar from '@/components/page2/navbar'
import Querypage from '@/components/page2/querypage'
import Indexpage from './indexpage.vue'
import Navbarhorizon from './navbarhorizon'
export default {
  components: {
    Headertop,
    Navbar,
    Navbarhorizon,
    Querypage,
    Indexpage,
  },
}
</script>
  <style scoped>
.bg-purple-dark {
  background: #99a9bf;
}
/* .bg-purple {
    background: #012650;
  } */
/* .bg-purple-light {
  background-color: #99a9bf;
} */
/* .bg-purple-lighter{
    background-color:bisque;
  } */
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
  